<template>
  <div class="app-container">
    <el-form ref="queryForm" inline :model="queryParams">
      <el-form-item prop="username">
        <el-input
          v-model="queryParams.username"
          placeholder="填写用户名称/用户账号"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">
          查询
        </el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="resetQuery">
          重置
        </el-button>
        <!-- <el-button type="primary" icon="el-icon-upload" @click="handleExport">
          导入
        </el-button> -->
        <!-- <el-button type="primary" icon="el-icon-download" @click="handleExport">
          导出
        </el-button> -->
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">
          添加用户
        </el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="pageList" fit stripe height="615px">
      <el-table-column
        label="序号"
        align="left"
        width="80"
        prop="uid"
      ></el-table-column>
      <el-table-column
        label="用户名"
        header-align="left"
        align="left"
        width="160"
        prop="username"
        show-overflow-tooltip
      ></el-table-column>
      <!-- <el-table-column
        label="单位"
        header-align="left"
        align="left"
        width="200"
        prop="company"
        show-overflow-tooltip
      ></el-table-column> -->
      <el-table-column label="角色" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-tag v-for="role in scope.row.roles" :key="role.roleId">
            {{ role.roleName }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        width="160"
        header-align="left"
        align="center"
        prop="status"
      >
        <template slot-scope="scope">
          <!-- <el-tag type="success" v-if="scope.row.status == 0"> 启用 </el-tag>
          <el-tag type="danger" v-if="scope.row.status == 1"> 禁用 </el-tag> -->
          <el-switch
            v-model="scope.row.status"
            :active-value="0"
            :inactive-value="1"
            active-text="启用"
            inactive-text="禁用"
            inactive-color="#ff4949"
            @change="handleStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="创建时间"
        width="190"
        align="left"
        prop="createtime"
      ></el-table-column> -->
      <el-table-column
        label="邮箱"
        width="200"
        header-align="left"
        align="left"
        prop="email"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="账号"
        width="160"
        header-align="left"
        align="left"
        prop="login"
        show-overflow-tooltip
      ></el-table-column>
      <!-- <el-table-column
        label="初始密码"
        width="150"
        header-align="left"
        align="left"
        prop="password"
        show-overflow-tooltip
      ></el-table-column> -->
      <el-table-column label="操作" align="left" width="200" fixed="right">
        <template slot-scope="scope">
          <!-- <template v-if="scope.row.uid != userinfo.uid"> -->
          <el-button
            type="text"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['/v1/rbac/user/update']"
            >修改</el-button
          >
          <el-button
            type="text"
            @click="handleDelete(scope.row)"
            v-hasPermi="['/v1/rbac/user/delete']"
            >删除</el-button
          >
          <el-button
            type="text"
            @click="handleBindRoles(scope.row)"
            v-hasPermi="['/v1/rbac/user/roles/bind']"
            >绑定角色</el-button
          >
          <!-- </template>
          <template v-else>
            <el-button type="text" @click="handleScan(scope.row)"
              >查看</el-button
            >
          </template> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.size"
      @pagination="getList"
    />

    <el-dialog
      append-to-body
      center
      width="800px"
      :visible.sync="visible"
      :title="title"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <!-- <el-form-item label="账号" prop="login">
          <el-input v-model="form.login" placeholder="填写账号" />
        </el-form-item> -->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" placeholder="填写用户名" />
        </el-form-item>
        <!-- <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" placeholder="填写密码" />
        </el-form-item> -->
        <el-form-item label="用户邮箱" prop="email">
          <el-input v-model="form.email" placeholder="填写用户邮箱" />
        </el-form-item>
        <!-- <el-form-item label="用户角色" prop="roleId">
          <el-select v-model="form.roleId" placeholder="选择角色">
            <el-option label="普通管理员" value="普通管理员"></el-option>
            <el-option label="普通用户" value="普通用户"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="用户状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="0">启用</el-radio>
            <el-radio :label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button
          v-if="title != '查看'"
          type="primary"
          :loading="btnLoading"
          @click="submitForm"
        >
          确 定
        </el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <BindRoles ref="bindRoles" @getList="getList"></BindRoles>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

import { uesrList, createUser, updateUser, deleteUser } from "@/api/user";

import BindRoles from "./bindRoles.vue";

export default {
  name: "Accountset",
  components: { BindRoles },
  computed: {
    ...mapGetters(["userinfo"]),
  },
  data() {
    return {
      queryParams: {
        page: 1,
        size: 10,
        username: undefined,
      },
      visible: false,
      title: "新增",
      total: 0,
      loading: false,
      form: {},
      rules: {
        login: { required: true, message: "请填写账号", trigger: "blur" },
        username: { required: true, message: "请填写用户名", trigger: "blur" },
        email: [
          {
            type: "email",
            required: true,
            message: "请填写邮箱",
            trigger: "blur",
          },
        ],
        roleId: {
          required: true,
          message: "请选择用户角色",
          trigger: "change",
        },
        status: {
          required: true,
          message: "请选择用户状态",
          trigger: "change",
        },
      },
      pageList: [],
      btnLoading: false,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleBindRoles(row) {
      this.$refs.bindRoles.init(row);
    },
    handleAdd() {
      this.title = "新增";
      this.$set(this.form, "status", 0);
      this.visible = true;
    },
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.handleQuery();
    },
    handleExport() {
      // this.download(
      //   "system/user/export",
      //   {
      //     ...this.queryParams,
      //   },
      //   `用户管理_${new Date().getTime()}.xlsx`
      // );
    },
    handleUpdate(row) {
      this.form = { ...row };
      this.title = "编辑";
      this.visible = true;
    },
    handleScan(row) {
      this.form = { ...row };
      this.title = "查看";
      this.visible = true;
    },
    handleStatusChange(row) {
      let text = row.status == 1 ? "禁用" : "启用";
      this.$modal
        .confirm(`确认要${text}当前用户吗？`)
        .then(function () {
          return updateUser({ uid: row.uid, status: row.status });
        })
        .then(() => {
          this.$modal.msgSuccess(text + "成功");
        })
        .catch(function () {
          row.status = row.status == 0 ? 1 : 0;
        });
    },
    cancel() {
      this.form = {};
      this.$refs.form.resetFields();
      this.visible = false;
    },
    handleDelete(row) {
      this.$confirm("确定要删除此用户吗？", "提示", { type: "warning" }).then(
        () => {
          deleteUser({ uid: row.uid }).then((res) => {
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: "操作成功",
              });
              this.getList();
            } else {
              this.$message({
                type: "error",
                message: res.message,
              });
            }
          });
        }
      );
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.btnLoading = true;

          if (this.form.uid) {
            // 编辑
            updateUser(this.form)
              .then((res) => {
                if (res.code == 0) {
                  this.$message({
                    type: "success",
                    message: "操作成功",
                  });
                  this.cancel();
                  this.getList();
                } else {
                  this.$message({
                    type: "error",
                    message: res.msg,
                  });
                }
              })
              .finally(() => (this.btnLoading = false));
          } else {
            createUser(this.form)
              .then((res) => {
                if (res.code == 0) {
                  this.$message({
                    type: "success",
                    message: "操作成功",
                  });
                  this.cancel();
                  this.getList();
                } else {
                  this.$message({
                    type: "error",
                    message: res.msg,
                  });
                }
              })
              .finally(() => (this.btnLoading = false));
          }
        }
      });
    },
    handleQuery() {
      this.queryParams.page = 1;

      this.getList();
    },
    getList() {
      this.loading = true;
      uesrList(this.queryParams)
        .then((res) => {
          this.pageList = res.data.items || [];
          this.total = res.data.total || 0;
        })
        .finally(() => (this.loading = false));
    },
  },
};
</script>

<style></style>
